<!--
Copyright 2014 Todd Fleming

This file is part of jscut.

jscut is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

jscut is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with jscut.  If not, see <http://www.gnu.org/licenses/>.
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>jscut</title>
    <link href="lib/bootstrap-3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="lib/bootstrap-slider.min.css" rel="stylesheet">
    <link href="jscut.css" rel="stylesheet">
</head>
<body>
    <!-- Save Settings Modal -->
    <div class="modal fade" id="save-settings-modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        Save Settings
                    </h4>
                </div>
                <div class="modal-body">
                    <input id="SaveSettings1" data-bind="value: saveSettingsFilename">
                    <br /><br />Have any default settings? Name them "preload.jscut" and click "In Browser". jscut will automatically load this each time it starts.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveSettingsLocalStorage(function () { $('#save-settings-modal').modal('hide') })">In Browser</button>
                    <button type="button" class="btn btn-primary" onclick="saveSettingsLocalFile(function () { $('#save-settings-modal').modal('hide') })">Local file</button>
                    <button type="button" class="btn btn-primary" onclick="$('#save-settings-modal').modal('hide');$('#save-gist-warning').modal('show')">Gist</button>
                    <button type="button" class="btn btn-primary" id="saveSettingsGoogle1" data-bind="visible: enableGoogleDrive" onclick="saveSettingsGoogle(function () { $('#save-settings-modal').modal('hide') })">Google Drive</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Load settings from Local Storage Modal -->
    <div class="modal fade" id="load-local-storage-settings-modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        Load Settings
                    </h4>
                </div>
                <div class="modal-body">
                  <p>Select settings:<select id="selectSettings" data-bind="options: localStorageSettings, value: loadLocalStorageFilename"></select></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="$('#load-local-storage-settings-modal').modal('hide'); $('#delete-local-storage-settings-modal').modal('show')">Delete</button>
                    <button type="button" class="btn btn-primary" onclick="loadSettingsLocalStorage(function () { $('#load-local-storage-settings-modal').modal('hide') })">Load</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete settings from Local Storage Modal -->
    <div class="modal fade" id="delete-local-storage-settings-modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog alert-danger">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        Delete Settings
                    </h4>
                </div>
                <div class="modal-body">
                    <p>Delete "<b><span data-bind="text: loadLocalStorageFilename"></span></b>"?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="deleteSettingsLocalStorage()">Delete</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Save GCODE Modal -->
    <div class="modal fade" id="save-gcode-modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        Save GCODE
                    </h4>
                </div>
                <div class="modal-body">
                    <input id="FileGetGcode1" data-bind="value: gcodeFilename">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveGcodeLocalFile(function () { $('#save-gcode-modal').modal('hide') })">Local file</button>
                    <button type="button" class="btn btn-primary" id="saveGcodeGoogle1" data-bind="visible: enableGoogleDrive" onclick="saveGcodeGoogle(function () { $('#save-gcode-modal').modal('hide') })">Google Drive</button>
                    <button type="button" class="btn btn-primary" onclick="chiliSaveGcode()">ChiliPeppr</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Launch ChiliPeppr Modal -->
    <div class="modal fade" id="launch-chilipeppr-modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        Save GCODE
                    </h4>
                </div>
                <div class="modal-body">
                    gcode saved to chilipeppr.com.
                </div>
                <div class="modal-footer">
                    <a id="LaunchChiliPeppr" class="btn btn-primary" href="#" target="_blank" data-bind="attr:{href:launchChiliUrl()}">Launch ChiliPeppr TinyG</a>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Save Gist Warning -->
    <div class="modal fade" id="save-gist-warning" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        Create Anonymous Gist
                    </h4>
                </div>
                <div class="modal-body alert alert-warning">
                    <b>Warning</b>: This will create an Anonymous Gist which includes your settings and your SVG files.
                    Anonymous Gists are public. Anonymous Gists can not be deleted.
                    <br /><br />
                    <table class="table">
                        <tr>
                            <td><label for="saveGistDescriptionField">Description</label>
                            <td><input id="saveGistDescriptionField" data-bind="value: saveGistDescription">
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveSettingsGist()">Create Gist</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Save Gist Result -->
    <div class="modal fade" id="save-gist-result" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        Saved Gist
                    </h4>
                </div>
                <div class="modal-body">
                    <a href="#" target="_blank" data-bind="attr:{href:savedGistUrl()}">View Gist</a>
                    <br/>
                    <a href="#" target="_blank" data-bind="attr:{href:savedGistLaunchUrl()}">Launch jscut with Gist</a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Container -->
    <div class="container-fluid">
        <!-- Begin page content -->
        <div class="row">
            <!-- left -->
            <div class="col-sm-3 left-column">
                <!-- operations -->
                <div class="panel panel-default" id="Operations">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOperations">Operations</a>
                        </h3>
                    </div>
                    <div id="collapseOperations" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td><label for="pxPerInch">px per inch</label>
                                    <td><input type="number" step="any" id="pxPerInch" data-bind="value: svgViewModel.pxPerInch">
                            </table>
                            <div style="display: inline-block">
                                <button id="createOperationButton" class="btn btn-default" data-bind="click: addOperation, enable:selectionViewModel.selNumSelected()>0">Create Operation</button>
                            </div>
                        </div>
                        <div style="display:table">
                            <div data-bind="foreach: {data: operations, afterRender: hookupOperationPopovers}">
                                <div style="display:table-row; background-color: #f5f5f5;">
                                    <div style="display: table-cell; width: 1px; text-align:right"><label id="opShowDetail" data-bind="click: toggleDetail, text: showDetail() ? '&#x25bc;' : '&#x25b6;'"></label></div>
                                    <div style="display: table-cell; width: 1px; padding-right: 5px; padding-left: 5px"><input id="opEnabled" type="checkbox" data-bind="checked: enabled" /></div>
                                    <div style="display: table-cell; width: 1px; padding-right: 5px">
                                        <select id="opOperation" data-bind="value: camOp">
                                            <option>Pocket</option>
                                            <option>Inside</option>
                                            <option>Outside</option>
                                            <option>Engrave</option>
                                            <option>V Pocket</option>
                                        </select>
                                    </div>
                                    <div style="display: table-cell; width: 1px; padding-right: 5px"><input id="opCutDepth" class="number" type="number" step="any" data-bind="visible: camOp()!='V Pocket', value: cutDepth"></div>
                                    <div style="display: table-cell; width: 1px; padding-right: 5px"><label data-bind="visible: camOp()!='V Pocket'" class="control-label">Deep</label></div>
                                    <div style="display: table-cell; width: 1000px; padding-right: 5px; text-align:right"><a id="opGenerate" href="#" data-bind="click: generateToolPath">Generate</a></div>
                                    </div>
                                <div style="display:table-row" class="alert alert-danger" data-bind="visible: enabled() && camOp()=='V Pocket' && !miscViewModel.loadedCamCpp() && miscViewModel.camCppError().length == 0">
                                    <div style="display: table-cell"></div>
                                    <div style="display: table-cell"></div>
                                    <div style="display: table-cell">Waiting for cam-cpp.js to load.</div>
                                </div>
                                <div style="display:table-row" class="alert alert-danger" data-bind="visible: enabled() && camOp()=='V Pocket' && miscViewModel.camCppError().length != 0">
                                    <div style="display: table-cell"></div>
                                    <div style="display: table-cell"></div>
                                    <div style="display: table-cell" data-bind="html: miscViewModel.camCppError()"></div>
                                </div>
                                <div style="display:table-row" class="alert alert-danger" data-bind="visible: enabled() && camOp()=='V Pocket' && toolModel.angle() == 180">
                                    <div style="display: table-cell"></div>
                                    <div style="display: table-cell"></div>
                                    <div style="display: table-cell">Set Tool Angle. This operation will not work until tool angle is set.</div>
                                </div>
                                <div style="display:table-row" data-bind="visible: showDetail">
                                    <div style="display: table-cell; width: 20px"></div>
                                    <div style="display: table-cell">
                                        <table class="table">
                                            <tr>
                                                <td><label class="control-label">Name</label>
                                                <td><input id="opName" data-bind="value: name">
                                            <tr data-bind="visible: camOp()!='V Pocket'">
                                                <td><label class="control-label">Ramp Plunge</label>
                                                <td><input id="opRamp" type="checkbox" data-bind="checked: ramp" />
                                            <tr>
                                                <td><label class="control-label">Combine</label>
                                                <td>
                                                    <select id="opCombine" data-bind="value: combineOp">
                                                        <option>Union</option>
                                                        <option>Intersect</option>
                                                        <option>Diff</option>
                                                        <option>Xor</option>
                                                    </select>
                                            <tr data-bind="visible: camOp()!='V Pocket'">
                                                <td><label class="control-label">Direction</label>
                                                <td>
                                                    <select id="opDirection" data-bind="value: direction">
                                                        <option>Conventional</option>
                                                        <option>Climb</option>
                                                    </select>
                                            <tr>
                                                <td><label class="control-label">Units</label>
                                                <td><select data-bind="value: units"><option>inch<option>mm</select>
                                            <tr data-bind="visible: camOp()!='Engrave'">
                                                <td><label class="control-label">Margin</label>
                                                <td><input id="opMargin" type="number" step="any" data-bind="value: margin">
                                            <tr data-bind="visible: camOp()=='Inside' || camOp()=='Outside'">
                                                <td><label class="control-label">Width</label>
                                                <td><input id="opWidth" type="number" step="any" data-bind="value: width">
                                            <tr><td><td><a href="#" data-bind="click: $root.removeOperation">Delete Operation</a>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- tabs -->
                <div class="panel panel-default" id="Tabs">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTabs">Tabs</a>
                        </h3>
                    </div>
                    <div id="collapseTabs" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="alert alert-danger" data-bind="visible: tabs().length != 0 && !miscViewModel.loadedCamCpp() && miscViewModel.camCppError().length == 0">
                                <div>Waiting for cam-cpp.js to load.</div>
                            </div>
                            <div class="alert alert-danger" data-bind="visible: tabs().length != 0 && miscViewModel.camCppError().length != 0">
                                <div data-bind="html: miscViewModel.camCppError()"></div>
                            </div>
                            <table class="table">
                                <tr>
                                    <td><label for="tabsUnits" class="control-label">Units</label>
                                    <td><select id="tabsUnits" data-bind="value: units"><option>inch<option>mm</select>
                                <tr>
                                    <td><label for="tabsMaxCutDepth" class="control-label">Max Cut Depth</label>
                                    <td><input id="tabsMaxCutDepth" type="number" step="any" data-bind="value: maxCutDepth">
                            </table>
                            <div style="display: inline-block">
                                <button id="createTabsButton" class="btn btn-default" data-bind="click: addTab, enable:selectionViewModel.selNumSelected()>0">Create Tabs</button>
                            </div>
                        </div>
                        <div style="display:table">
                            <div data-bind="foreach: {data: tabs, afterRender: hookupTabPopovers}">
                                <div style="display:table-row">
                                    <div style="display: table-cell; width: 1px; padding-right: 5px; padding-left: 5px"><input id="tabEnabled" type="checkbox" data-bind="checked: enabled" /></div>
                                    <div style="display: table-cell; width: 1px; padding-right: 5px"><input id="tabMargin" class="number" type="number" step="any" data-bind="value: margin"></div>
                                    <div style="display: table-cell; width: 1px; padding-right: 5px"><a href="#" data-bind="click: $root.removeTab">Delete</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- tool -->
                <div class="panel panel-default" id="Tool">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTool">Tool (shared for all operations)</a>
                        </h3>
                    </div>
                    <div id="collapseTool" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td><label for="toolUnits" class="control-label">Units</label>
                                    <td><select id="toolUnits" data-bind="value: units"><option>inch<option>mm</select>
                                <tr>
                                    <td><label for="toolDiameter" class="control-label">Diameter</label>
                                    <td><span data-bind="text: units"></span>
                                    <td><input id="toolDiameter" type="number" step="any" data-bind="value: diameter">
                                <tr>
                                    <td><label for="toolAngle" class="control-label">Angle</label>
                                    <td>degrees
                                    <td><input id="toolAngle" type="number" step="any" data-bind="value: angle">
                                <tr>
                                    <td><label for="toolPassDepth" class="control-label">Pass Depth</label>
                                    <td><span data-bind="text: units"></span>
                                    <td><input id="toolPassDepth" type="number" step="any" data-bind="value: passDepth">
                                <tr>
                                    <td><label for="toolStepOver" class="control-label">Step Over</label>
                                    <td>(0, 1]
                                    <td><input id="toolStepOver" type="number" step="any" data-bind="value: stepover">
                                <tr>
                                    <td><label for="toolRapidRate" class="control-label">Rapid</label>
                                    <td><span data-bind="text: units"></span>/min
                                    <td><input id="toolRapidRate" type="number" step="any" data-bind="value: rapidRate">
                                <tr>
                                    <td><label for="toolPlungeRate" class="control-label">Plunge</label>
                                    <td><span data-bind="text: units"></span>/min
                                    <td><input id="toolPlungeRate" type="number" step="any" data-bind="value: plungeRate">
                                <tr>
                                    <td><label for="toolCutRate" class="control-label">Cut</label>
                                    <td><span data-bind="text: units"></span>/min
                                    <td><input id="toolCutRate" type="number" step="any" data-bind="value: cutRate">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- center -->
            <div id="MainSvgDiv" class="col-sm-6">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button> <a class="navbar-brand" href="index.html" target="_blank">jscut</a>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Open SVG<strong class="caret"></strong></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#" class="choose-file">Local<input type="file" id="choose-svg-file" multiple></a></li>
                                    <li><a href="#" id="openSvgGoogle1" data-bind="visible: enableGoogleDrive" onclick="openSvgGoogle()">Google Drive</a></li>
                                    <li><a href="#" id="openSvgDropbox1" data-bind="visible: enableDropbox" onclick="openSvgDropbox()">Dropbox</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Open Settings<strong class="caret"></strong></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#" onclick="showLoadSettingsFromLocalStorageModal()">In Browser</a></li>
                                    <li><a href="#" class="choose-file">Local<input type="file" id="choose-settings-file"></a></li>
                                    <li><a href="#" id="loadSettingsGoogle1" data-bind="visible: enableGoogleDrive" onclick="loadSettingsGoogle()">Google Drive</a></li>
                                </ul>
                            </li>
                            <li><a href="#" onclick="showSaveSettingsModal()">Save Settings</a></li>
                            <li><a href="#save-gcode-modal" data-toggle="modal">Save GCODE</a></li>
                        </ul>
                    </div>
                </nav>

                <div class="tabbable" id="tabs-139888">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#svgPanel" data-toggle="tab">Edit Toolpaths</a>
                        </li>
                        <li>
                            <a href="#simulatePanel" data-toggle="tab">Simulate GCODE</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="svgPanel">
                            <svg id="MainSvg" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" />
                        </div>
                        <div class="tab-pane" id="simulatePanel">
                            <canvas id="renderPathCanvas" style="border: none;" width="10" height="10"></canvas>
                            <br /><br /><b>Simulation time: &nbsp;&nbsp;&nbsp;</b><input id="timeSlider" type="text" data-slider-min="0" data-slider-max="1000" data-slider-step="1" data-slider-value="1000" />
                            <br /><br />
                            <div data-bind="visible: miscViewModel.debug">
                                <label class="control-label">debugArg0:&nbsp;</label><input type="number" step="any" data-bind="value: miscViewModel.debugArg0"><br />
                                <label class="control-label">debugArg1:&nbsp;</label><input type="number" step="any" data-bind="value: miscViewModel.debugArg1"><br />
                            </div>
                            <ul>
                                <li>Use mouse to rotate view</li>
                                <li>Use slider control to set simulation time</li>
                                <li>Simulation remains blank until you generate toolpaths</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- right -->
            <div class="col-sm-3 right-column">
                <div id="alert_placeholder"></div>
                <!-- material -->
                <div class="panel panel-default" id="Material">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseMaterial">Material</a>
                        </h3>
                    </div>
                    <div id="collapseMaterial" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-sm-10">
                                        <svg id="MaterialSvg" class="autoheight" viewBox="0 0 74 35" internalWidth="74" internalHeight="35" />
                                    </div>
                                </div>
                            </div>
                            <table class="table">
                                <tr>
                                    <td>
                                    <td><a href="#" onclick="makeAllSameUnit('mm')">Make all mm</a>
                                <tr>
                                    <td>
                                    <td><a href="#" onclick="makeAllSameUnit('inch')">Make all inch</a>
                                <tr>
                                    <td><label for="selectMatUnits">Units</label>
                                    <td>
                                        <select id="selectMatUnits" data-bind="value: matUnits">
                                            <option>inch</option>
                                            <option>mm</option>
                                        </select>
                                <tr>
                                    <td><label for="inputMatThickness">Thickness</label>
                                    <td><input type="number" step="any" id="inputMatThickness" data-bind="value: matThickness" placeholder="Thickness">
                                <tr>
                                    <td><label for="selectMatZOrigin">Z Origin</label>
                                    <td>
                                        <select id="selectMatZOrigin" data-bind="value: matZOrigin">
                                            <option>Top</option>
                                            <option>Bottom</option>
                                        </select>
                                <tr>
                                    <td><label for="inputMatClearance">Clearance</label>
                                    <td><input type="number" step="any" id="inputMatClearance" data-bind="value: matClearance" placeholder="Clearance">
                            </table>
                        </div>
                    </div>
                </div>
                <!-- Curve To Line Conversion -->
                <div class="panel panel-default" id="CurveToLine">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseCurveToLine">Curve To Line Conversion</a>
                        </h3>
                    </div>
                    <div id="collapseCurveToLine" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="form-horizontal">
                                <table class="table">
                                    <tr>
                                        <td><label for="inputSelMinNumSegments">Minimum Segments</label>
                                        <td><input type="number" id="inputSelMinNumSegments" data-bind="value: selMinNumSegments" placeholder="Segments">
                                    <tr>
                                        <td><label for="inputSelMinSegmentLength">Minimum Segment Length (<span data-bind="text: selMinSegmentLength.units()"></span>)</label>
                                        <td><input type="number" step="any" id="inputSelMinSegmentLength" data-bind="value: selMinSegmentLength" placeholder="Length">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Gcode Conversion -->
                <div class="panel panel-default" id="GcodeConversion">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseGcodeConversion">Gcode Conversion</a>
                        </h3>
                    </div>
                    <div id="collapseGcodeConversion" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="form-horizontal">
                                <table class="table">
                                    <tr>
                                        <td><label class="control-label">Gcode Units</label>
                                        <td><select data-bind="value: units"><option>inch<option>mm</select>
                                    <tr>
                                        <td>
                                        <td colspan="2"><a id="gcodeZeroLowerLeft" href="#" data-bind="click: zeroLowerLeft">Zero lower left</a>
                                    <tr>
                                        <td>
                                        <td colspan="2"><a id="gcodeZeroCenter" href="#" data-bind="click: zeroCenter">Zero center</a>
                                    <tr>
                                        <td><label for="gcodeReturn00">Return to 0,0 at end</label>
                                        <td><input id="gcodeReturn00" type="checkbox" data-bind="checked: returnTo00" />
                                    <tr>
                                        <td><label for="gcodeOffsetX">X Offset</label>
                                        <td><span data-bind="text: units" />
                                        <td><input type="number" step="any" id="gcodeOffsetX" data-bind="value: offsetX">
                                    <tr>
                                        <td><label for="gcodeOffsetY">Y Offset</label>
                                        <td><span data-bind="text: units" />
                                        <td><input type="number" step="any" id="gcodeOffsetY" data-bind="value: offsetY">
                                    <tr><td><label class="control-label">Min X</label><td><span data-bind="text: units" /><td><span id="gcodeMinX" data-bind="text: minX" />
                                    <tr><td><label class="control-label">Max X</label><td><span data-bind="text: units" /><td><span id="gcodeMaxX" data-bind="text: maxX" />
                                    <tr><td><label class="control-label">Min Y</label><td><span data-bind="text: units" /><td><span id="gcodeMinY" data-bind="text: minY" />
                                    <tr><td><label class="control-label">Max Y</label><td><span data-bind="text: units" /><td><span id="gcodeMaxY" data-bind="text: maxY" />
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="lib/jquery-2.1.1.min.js"></script>
    <script src="lib/bootstrap-3.1.1/js/bootstrap.min.js"></script>
    <script src="lib/bootstrap-slider.min.js"></script>
    <script src="lib/knockout-3.1.0.js"></script>
    <script src="lib/snap-0.3.0.svg.js"></script>
    <script src="lib/clipper_unminified-6.1.3.2.js"></script>
    <script src="lib/gl-matrix-2.2.0-min.js"></script>
    <script src="lib/webgl-utils.js"></script>
    <script src="lib/FileSaver.js"></script>
    <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="l00gmdr0kh6ke45"></script>
    <script src="config.js"></script>
    <script src="js/path.js"></script>
    <script src="js/Cam.js"></script>
    <script src="api/js/parseGcode.js"></script>
    <script src="js/RenderPath.js"></script>
    <script src="js/UnitConverter.js"></script>
    <script src="js/SvgViewModel.js"></script>
    <script src="js/MaterialViewModel.js"></script>
    <script src="js/SelectionViewModel.js"></script>
    <script src="js/OperationsViewModel.js"></script>
    <script src="js/TabsViewModel.js"></script>
    <script src="js/GcodeConversionViewModel.js"></script>
    <script src="js/jscut.js"></script>
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onGoogleApiLoad"></script>
    <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onGoogleClientLoad"></script>
</body>
</html>
